<template>
	<view class="container">
		<image src="/static/img/indexbg.png" mode="widthFix" class="img_bg"></image>
		<view class="main">
			<view class="tips">
				所有数据均收集自网络（各公司员工分享），数据仅供参考， 不为真实性负责。请知悉！
			</view>
			<view class="search">
				<!-- <u-input placeholder="请输入船名或IMO或MMSI" v-model="state.searchValue" confirm-type="search"
					@confirm="searchHand"></u-input> -->
				<zykSelectInput :value="state.searchValue" :clearable="true" @change="change" @onSelect="onSelect"
					@onSelectItem="onSelectItem" labelAttrName="vesselname" @search="searchHand" :options="state.options"
					:disabled="false" placeholder="请输入船名或IMO或MMSI"></zykSelectInput>
				<!-- <view class="search_icon" @click="searchHand">
					<u-icon name="search" size="52"></u-icon>
				</view> -->
			</view>
			<view class="banner">
				<image src="/static/img/banner.png" mode="widthFix"></image>
			</view>
			<view class="box_list">
				<view class="box_title">薪资爆料</view>
				<template v-if="state.list.length > 0">
					<view class="box" v-for="(item,index) in state.list" :key="index" @click="gotoboats(item)">
						<view class="box_content">
							<view class="box_content_left">
								<view class="left_box">
									<view class="label">船名：</view>
									<view class="value">{{item.vesselname}}</view>
								</view>
								<view class="left_box">
									<view class="label">呼号：</view>
									<view class="value">{{item.callsign}}</view>
								</view>
								<view class="left_box">
									<view class="label">IMO：</view>
									<view class="value">{{item.imo}}</view>
								</view>
								<view class="left_box">
									<view class="label">MMSI：</view>
									<view class="value">{{item.mmsi}}</view>
								</view>
							</view>
							<u-button class="box_btn" type="primary" @click.stop="gotoboats(item)">
								查看薪资
							</u-button>
						</view>
					</view>
				</template>
				<u-empty v-else text="暂无填写薪资" mode="list"></u-empty>
			</view>
		</view>
	</view>
	<Tabbar :value="0" />
</template>

<script setup lang="ts">
	import { reactive } from 'vue';
	import Tabbar from '@/components/tabbar.vue'
	import zykSelectInput from '@/components/zyk-selectInput/zyk-selectInput.vue'
	import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
	import { shipIndex, miniProgramOauth, tokenRefresh, shipList } from '@/common/api'
	const state = reactive({
		list: [],
		options: [],
		searchValue: ''
	})
	onLoad(() => {
		let tokenEnd = uni.getStorageSync('token_expire')
		const currentTime = Date.now()
		console.log(currentTime)
		console.log(tokenEnd)
		if (tokenEnd && currentTime < (tokenEnd * 1000)) {
			getList()
		} else {
			uni.showLoading({
				title: '加载中...'
			})
			uni.login({
				provider: 'weixin',
				success: async (loginRes) => {
					console.log(loginRes.code)
					const { data } = await miniProgramOauth({
						code: loginRes.code
					})
					uni.setStorageSync('token', data.token)
					uni.setStorageSync('token_expire', data.token_expire)
					if (data.register == 1) {
						uni.setStorageSync('userinfo', data.userinfo)
					}
					await getList()
					uni.hideLoading()
				}
			})
		}
	})
	onShareAppMessage((res) => {
		return {
			title: '海员薪资行情'
		}
	})

	onShareTimeline((res) => {
		return {
			title: '海员薪资行情'
		}
	})

	const change = async (value) => {
		console.log(value)
		state.searchValue = value
		const { data } = await shipList({ code: value })
		console.log(data)
		state.options = data
	}

	const clear1 = (value) => {
		console.log('clear1', value)
	}
	const onSelect = (e) => {
		console.log('onSelect', e)
	}
	const onSelectItem = (value) => {
		console.log('onSelectItem', value)

		uni.navigateTo({
			url: `/pages/boats/boats?id=${value.id}`
		})
	}
	const searchHand = async (e) => {
		console.log(e)
		if (!state.searchValue) {
			uni.showToast({
				title: `请输入要搜索内容`,
				icon: 'none'
			})
			return
		}
		uni.navigateTo({
			url: `/pages/boats/boats?code=${state.searchValue}`
		})
	}
	const getList = async () => {
		const { data } = await shipIndex({})
		console.log(data)
		state.list = data.wages
	}
	const gotoSalary = (item) => {
		uni.navigateTo({
			url: `/pages/salary/salary?id=${item.ship_id}`
		})
	}
	const gotopayExplosion = () => {
		uni.navigateTo({
			url: '/pages/payExplosion/payExplosion'
		})
	}
	const gotoboats = (item) => {
		console.log(item)
		uni.navigateTo({
			url: `/pages/boats/boats?id=${item.ship_id}`
		})
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		overflow: hidden;
	}

	.container {
		position: relative;
		width: 750rpx;
		font-family: PingFang-SC, PingFang-SC;
		background-color: #f4f4f4;
		height: 100%;
		overflow: hidden;

		.img_bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 750rpx;
			z-index: 0;
		}

		.main {
			position: relative;
			z-index: 1;
			padding: 0 35rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			height: 100%;
			overflow: hidden;
			padding-bottom: 120rpx;
		}

		.tips {
			color: #fff;
			text-align: justify;
			padding: 30rpx 0;
			font-weight: 400;
			font-size: 25rpx;
			line-height: 42rpx;
			font-style: normal;
			text-transform: none;
		}

		.search {
			position: relative;
			width: 100%;
			height: 72rpx;

			.search_icon {
				position: absolute;
				right: 20rpx;
				top: 0;
				bottom: 0;
				margin: auto;
				z-index: 9;
				display: flex;
				align-items: center;
			}
		}

		:deep().u-input {
			background-color: #fff;
			flex: 0;
			height: 72rpx;

			input {
				padding-left: 20rpx;
			}
		}

		.banner {
			width: 100%;
			padding: 28rpx 0 22rpx;

			image {
				width: 100%;
				height: 220rpx;
			}
		}

		.box_list {
			flex: 1;
			overflow: auto;
		}

		.box_title {
			font-size: 36rpx;
			color: #282828;
			text-transform: none;
			margin-bottom: 10rpx;
			font-weight: 700;
		}

		.box {
			width: 100%;
			background: #fff;
			padding: 28rpx 30rpx;
			box-sizing: border-box;
			margin-bottom: 15rpx;
			box-shadow: rgba(0, 0, 0, 0.1) 0rpx 4rpx 6rpx -1px, rgba(0, 0, 0, 0.06) 0rpx 2rpx 4rpx -1rpx;
			border-radius: 8rpx;



			.box_content {
				display: flex;
				align-items: center;

				&_left {
					flex: 1;
					display: flex;
					flex-wrap: wrap;

					.left_box {
						width: 50%;
						display: flex;
						// align-items: center;
						font-size: 26rpx;
						line-height: 30rpx;
						padding: 10rpx 0;
						color: #282828;
					}

					.label {
						white-space: nowrap;
					}

					.value {}
				}

			}

			.btn_main {
				width: 100%;
				display: flex;
				justify-content: flex-end;
			}

			.box_btn {
				width: 130rpx !important;
				height: 56rpx;
				margin: 0;
				font-size: 24rpx !important;

				:deep().u-btn {
					height: 56rpx;
				}
			}
		}
	}
</style>